<template>
	<div class="iot-page">
		<div class="inner">
			<Map @alarm="alarmAction"></Map>
			<el-container class="page-iot-container" direction="vertical">
				<iotHeader :type="type"></iotHeader>
				<el-container v-if="dataObj">
					<el-main class="iot-main">
						<div class="iot-left">
							<Region @play="playVideo"></Region>
						</div>
						<div class="iot-right">
							<Device :type="type" :data="dataObj.deviceObject"></Device>
                            <Today :type="type" class="mt-30" :data="dataObj.todayAlarmObject"></Today>
                            <!--  :data="dataObj.todayAlarmObject" -->
							<!-- <Top3 ref="week" class="mt-30" :type="type" :data="dataObj.weekAlarmList"></Top3> -->
							<Week ref="week" class="mt-30" :type="type" :data="dataObj.weekAlarmList"></Week>
						</div>
						<div class="iot-bottom">
							<Realtime ref="realtime" :type="type"></Realtime>
						</div>
                        <videoModal ref="videoModal" v-show="videoModalVisible" @close="videoModalVisible=false"></videoModal>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import iotHeader from '@/components/iot/IOTHeader.vue'
import Map from '@/components/iot/kitchen/Map.vue'
import Region from '@/components/iot/kitchen/Region.vue'
import Today from '@/components/iot/kitchen/Today.vue'
import Top3 from '@/components/iot/kitchen/Top3.vue'
import Week from '@/components/iot/Week.vue'
import Device from '@/components/iot/kitchen/Device.vue'
import Realtime from '@/components/iot/Realtime.vue'
import VideoModal from '@/components/iot/kitchen/VideoModal.vue'
export default {
	name: 'Home',
	props: {
		winH: {
			type: Number,
			default: 500
		}
	},
	data () {
		return {
			type: this.$route.query.type || 'fireControl',
			dataObj: null,
			loading: false,
            videoModalVisible: false
		}
	},
	components: {
		iotHeader,
		Map,
		Today,
		Top3,
		Device,
		Realtime,
        Region,
        VideoModal,
		Week
	},
	computed: {
		...mapState([
			'scale',
			'siteInfos'
		]),
	},
	created () {
		this.getData()
	},
	methods: {
		getData () {
			this.openFullLoading()
			let url = '/firefightingvisualization/firefightingvisualization/getBrightKitchenCount'
			this.$get(url,{
				nums: 5,
				type:1,
				userType: this.siteInfos.userType
			}).then(res => {
				this.closeFullLoading()
				this.dataObj = res.data
                const {deviceCount,businessCount} = this.dataObj
                this.dataObj.deviceObject = {deviceCount,businessCount}
			}, (err) =>{
				this.closeFullLoading()
				if(err.msg){
					this.$message.error(err.msg);
				}
			})
		},
		alarmAction () {
			this.getData()
			if(this.$refs.realtime){
				this.$refs.realtime.getData()
			}
		},
		playVideo (item) {
			this.videoModalVisible = true
			this.$nextTick(()=>{
				this.$refs.videoModal.playVideo(item)
			})
			
		},
	},
}
</script>

<style lang="less">
@import '../assets/css/IOT.less';
</style>
